<template>
  <view class="sku-count">
    <view class="content">
      <view class="number">
        <view class="minus" @click="minus">-</view>
        <input class="input" type="number" v-model="number" disabled="disabled">
        <view class="plus" @click="plus">+</view>
      </view>
    </view>
  </view>
</template>

<script>
import store from 'store'
import { mapActions,mapGetters } from 'vuex'

export default {
  name: "ProductSelectedNoSkuCountCom",
  store,
  props:{
	  item: {
		type: Object,
		default: null
	  }
  },
	computed: {
	  ...mapGetters([
	    'selectedSkuCount'
	  ])
	},
  data: () => ({
    min: 0,
    max: 1000,
    step: 1,
	number:1,
  }),
 watch: {
   item: {
     handler(val) {
       if (this.item) {
		   
         this.number = this.item.number
       }
     },
     immediate: true
   },
  
 },
  methods: {
    ...mapActions([
      'refreshSelectedSkuCount'
    ]),
    minus() {
      if (this.number > this.min) {
        this.number -= this.step
		if(this.item){
			this.item.number = this.number
			if(this.item.number == 0){
				this.$emit("removeCart",this.item.id);
			}else{
				let params = {
					id:this.item.id,
					number: this.item.number,
				}
				this.$emit("updateCartProduct",params);
				
			}
		}
		
        this.refreshSelectedSkuCount(this.number)
      }
    },
    plus() {
      if (this.number < this.max) {
        this.number += this.step
		if(this.item){
			
			this.item.number = this.number
			
			let params = {
				id:this.item.id,
				number: this.item.number,
			}
			this.$emit("updateCartProduct",params);
		}
        this.refreshSelectedSkuCount(this.number)
      }
    },
	
  },
  /* removeProduct() {
	console.log(123);return false;
  	this.$emit('removeProduct')
  }, */
  created() {
	  if(this.item){
		  this.number = this.item.number;
	  }
  	
  },
  destroyed() {
	 
	   if(this.item){
			  this.number = this.item.number;
			  console.log(this.number);
	   }
	}
	
 
}
</script>

<style lang="scss" scoped>
.sku-count {
  .content {
    display: flex;
    justify-content: space-between;
	float:right;
    .text {

    }
    .number {
      display: flex;
      height: 50rpx;
			align-items: center;
      background-color: #fff;
      .input {
        display: flex;
        width: 60rpx;
				height: 50rpx;
        align-items: center;
				text-align: center;
        background-color: #fff;
      }
      .minus,.plus {
        display: flex;
        width: 32rpx;
		height: 36rpx;
		align-items: center;
		justify-content: center;
		color:#333;
		background:#efefef;
		border:1rpx solid #efefef;
      }
    }
  }
}
</style>
